<template>
    <form-item
        :designer="designer" 
        :field="field" 
        :rules="state.rules"
        :class="{
            'display-block':props.field.options.displayStyle==='block',
            'add-mr-5':props.field.options.displayStyle ==='block' && props.field.options.border
        }"
    >
        <el-checkbox-group 
            v-model="formModel[field.options.name]"
            :size="size"
            :disabled="disabled"
        >
            <template v-if="field.options.buttonStyle">
                <el-checkbox-button 
                    v-for="item in field.options.optionItems"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                />
            </template>
            <template v-else>
                <el-checkbox 
                    v-for="item in field.options.optionItems"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                    :border="border"
                /> 
            </template>
        </el-checkbox-group>
    </form-item>
</template>

<script setup>
import {nextTick, onMounted, reactive,computed} from 'vue';
import FormItem from './form-item.vue';
import {useRules} from '@/hooks/useRules.js'

defineOptions({
    name:"xy-checkbox"
})
const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    },
    field:{
        type:Object,
        default:()=>({})
    },
    formModel:{
        type:Object,
        default:()=>({})
    }
})

const state = reactive(({
    fieldVal:[],
    rules:[]
}))

useRules(state,props.field)

const disabled = computed(()=>{
    return props.field.options.disabled
})

const size = computed(()=>{
    return props.field.options.size || 'default'
})

const border = computed(()=>{
    return props.field.options.border
})

const setFieldVal = val=>{
    if(Array.isArray(props.field.options.defaultValue)) {
        nextTick(()=>{
            props.formModel[props.field.options.name] = val
        })
        return
    }
    if(!val) {
        // 清空默认值情况
        nextTick(()=>{
            props.formModel[props.field.options.name] = []
            props.field.options.defaultValue = []
        })
        return
    }
    if(typeof val === 'string'){
        val = val.split(',')
        // 每一项内容和设置的选项数组的值匹配
        if (! val.every((item) => {
            return !!props.field.options.optionItems.find(i=>i.value === item)
        })) {        
            nextTick(()=>{
                props.formModel[props.field.options.name] = []
                props.field.options.defaultValue = []
            })
        }
        props.formModel[props.field.options.name] = val
        return
    }
    props.formModel[props.field.options.name] = val
}

onMounted(()=>{
    if(props.field && props.field.options.defaultValue){
        // 存在默认值的情况下进行初始化
        setFieldVal(props.field.options.defaultValue)
    }

    nextTick(()=>{
        if(!props.designer) return
        props.designer.createFieldValFun(props.field.id, setFieldVal)
    })
})
</script>

<style lang="scss" scoped>
.display-block{
    display: block;
    label{
        display: block
    }
}
.add-mr-5{
    label{
        &:last-child{
            margin-right: 30px;
        }
    }
}
</style>
